<template>
    <div class="layout">
        <header>
            <div class="logo" ref="logo">顺子考试管理系统</div>

            <div class="right">
                <div class="login" v-if="false">
                    <router-link to="/login">登录</router-link>
                </div>

                <div class="bigbox" v-else>
                    <router-link to="/admin" class="user">
                        <el-icon>
                            <Avatar />
                        </el-icon>
                        <p>{{ nickName }}</p>
                    </router-link>
                    <div class="outlogin" @click="outLogin">退出登录</div>
                </div>
            </div>


        </header>
        <main>
            <!-- 左侧 -->
            <aside>
                <div class="left">
                    <div class="title">
                        首页
                    </div>
                    <ul>
                        <li>
                            <span>轮播图管理</span>
                            <router-link to="/banner_add">
                                <a :class="{ active: $route.path == '/banner_add' }">发布轮播图</a>
                            </router-link>
                            <router-link to="/banner_list">
                                <a :class="{ active: $route.path == '/banner_list' }">轮播图列表</a>
                            </router-link>
                        </li>
                        <li>
                            <span>导航管理</span>
                            <router-link to="/navi_add">
                                <a :class="{ active: $route.path == '/navi_add' }">添加导航</a>
                            </router-link>
                            <router-link to="/navi_list">
                                <a :class="{ active: $route.path == '/navi_list' }">导航列表</a>
                            </router-link>
                        </li>
                        <li>
                            <span><el-icon>
                                    <Menu />
                                </el-icon> 考试管理</span>
                            <router-link to="/">
                                <a :class="{ active: $route.path == '/' }">考试分类</a>
                            </router-link>
                            <router-link to="/test_paper">
                                <a :class="{ active: $route.path == '/test_paper' }">试卷管理</a>
                            </router-link>
                            <router-link to="/topic">
                                <a :class="{ active: $route.path == '/topic' }">题目管理</a>
                            </router-link>
                            <router-link to="/score">
                                <a :class="{ active: $route.path == '/score' }">成绩管理</a>
                            </router-link>
                        </li>
                        <router-link to="/user_list">
                            <li><a :class="{ active: $route.path == '/user_list' }"><el-icon>
                                        <Document />
                                    </el-icon> 用户管理</a></li>
                        </router-link>
                        <li>
                            <router-link to="/setting">
                                <a :class="{ active: $route.path == '/setting' }"><el-icon>
                                        <Setting />
                                    </el-icon> 系统管理</a>
                            </router-link>
                        </li>
                    </ul>
                </div>
            </aside>
            <section>
                <router-view></router-view>
            </section>
        </main>
    </div>
</template>

<style lang="scss" scoped>
@import './common/variable.scss';
$width: 170px;
$min-height: 590px;

.layout {
    width: 100%;
    height: 100vh;
    min-width: 800px;
    // background: linear-gradient(to bottom right, #002b58, #abc3c5);
    background: linear-gradient(to bottom right, #f7e0aa, #cb86d9);
    padding: 10px;

    header {
        width: 100%;
        height: 70px;
        background-color: $bgColor3;
        display: flex;
        justify-content: space-between;
        padding: 0px 30px;
        align-items: center;
        border-radius: 20px;
        box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);
        margin-bottom: 10px;
    }

    .logo {
        font-weight: bold;
    }

    .right {
        display: flex;
        font-weight: bold;
        align-items: center;
        margin-right: 10px;

        .login {
            margin-right: 20px;
        }

        .bigbox {
            display: flex;
            align-items: center;

            .user {
                display: flex;
                align-items: center;
                margin-right: 10px;

                i {
                    font-size: 25px;
                }
            }

            .outlogin {
                cursor: pointer;
                font-weight: bold;
                border-left: 3px solid #000;
                padding-left: 10px;
                height: 45px;
                line-height: 45px;
            }

        }

    }

    main {
        width: 100%;
        display: flex;
        min-height: 680px;

        aside {
            .left {
                padding: 10px;

                .title {
                    font-size: 18px;
                    font-weight: bold;
                }

                ul {
                    font-size: 16px;

                    li {
                        display: flex;
                        flex-direction: column;
                        border-radius: 10px;
                        box-shadow: -8px -2px 3px -8px rgba(0, 0, 0, 0.5);
                        padding: 5px 5px;

                        span {
                            color: #ccc;
                        }

                        a {
                            margin: 9px 0px;
                        }

                        .active {
                            color: skyblue;
                        }
                    }

                }
            }

            width: $width;
            min-height: $min-height;
            background-color: $bgColor3;
            transition: all .1s;
            border-radius: 20px;
            box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);
            padding: 10px 0px;

            .el-col-12 {
                max-width: 100%;
            }
        }

        section {
            margin-left: 10px;
            padding: 10px 5px;
            width: calc(100% - #{$width});
            min-height: $min-height;
            background-color: $bgColor3;
            border-radius: 20px;
            box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);
        }
    }

}
</style>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessageBox } from 'element-plus';
import type { Action } from 'element-plus'
const $router = useRouter();
import api from './api/http'
// elment-puls
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'



// 判断是否登录..........................................
// 拿到本地存储的token
let token = localStorage.getItem("token")
let nickName = ref<any>("");
let isLogin = ref<boolean>(false);
let dialogVisible = ref<boolean>(false);

if (token) {
    isLogin.value = true;
    // 从本地存储拿到昵称
    nickName.value = localStorage.getItem("nickName")
    api.logged({ token })
        .then(
            content => {
                if (content.code != 200) {
                    ElMessageBox.alert('登录已失效，请重新登录', '提示', {
                        // if you want to disable its autofocus
                        // autofocus: false,
                        confirmButtonText: '确定',
                        callback: (action: Action) => {
                            $router.replace('/login');
                        },
                    })
                    
                }
            }
        )
}
// 退出登录..............................................
const outLogin = () => {
    ElMessageBox.confirm('确定要退出登录吗?',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
    )
        .then(() => {
            $router.replace('/login');
        })
        .catch(() => {
            // catch error
        })
}

</script>